<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">活动</el-breadcrumb-item>
			<el-breadcrumb-item>成员管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div slot="header">
				<!-- 查询表单 -->
				<el-form :inline="true">
					<el-form-item label="输入搜索">
						<el-input v-model="searchForm.login_name" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item label="所属部门">
						<el-select v-model="searchForm.name">
							<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
					<el-button type="primary" @click="add">添加成员</el-button>
				</el-form>
			</div>

			<!-- 数据表格 -->
			<el-table :data="tableData" border>
				<el-table-column sortable label="成员账号" prop="login_name"></el-table-column>
				<el-table-column label="所属角色" prop="NAME"></el-table-column>
				<el-table-column sortable label="创建时间" prop="create_time"></el-table-column>
				<el-table-column label="是否启用">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.STATUS"
							active-color="#13ce66"
							inactive-color="#ff4949"
							active-value="1"
							inactive-value="0"
							@change="statusChange(scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="edit(scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteMember(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页开始 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="this.page"
				:page-sizes="[5,10,15,20]"
				:page-size="this.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="this.total"
			></el-pagination>
			<!-- 分页结束 -->
		</el-card>
		<!-- dialog新增对话框 -->
		<el-dialog title="新增" :visible.sync="dialogVisible" width="50%" @close="setAddClear">
			<!-- 表单数据 -->
			<el-form label-width="70px" status-icon :rules="rules" :model="memberForm" ref="memberForm">
				<el-form-item label="成员名称" prop="login_name" label-width="100">
					<el-input v-model="memberForm.login_name" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="所属角色" prop="role_id" label-width="100">
					<el-select v-model="memberForm.role_id" placeholder="请选择">
						<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="登录密码" prop="password" label-width="100">
					<el-input v-model="memberForm.password" type="password" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPassword" label-width="100">
					<el-input type="password" v-model="memberForm.checkPassword" style="width:300px"></el-input>
				</el-form-item>
			</el-form>
			<!-- 表单数据结束 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false; memberForm={}">取 消</el-button>
				<el-button type="primary" @click="addmember('memberForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- dialog修改对话框 -->
		<el-dialog title="修改" :visible.sync="updatedialogVisible" width="50%" @close="setUpdateClear">
			<!-- 表单数据 -->
			<el-form label-width="70px" status-icon :rules="rules" :model="memberForm" ref="memberForm">
				<el-form-item label="成员名称" label-width="100" prop="login_name">
					<el-input v-model="memberForm.login_name" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="所属角色" label-width="100" prop="role_id">
					<el-select v-model="memberForm.role_id">
						<el-option v-for="item in  roleList" :key="item.id" :value="item.id" :label="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="修改密码" prop="password1" label-width="100">
					<el-input v-model="memberForm.password1" type="password" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPassword1" label-width="100">
					<el-input type="password" v-model="memberForm.checkPassword1" style="width:300px"></el-input>
				</el-form-item>
			</el-form>
			<!-- 表单数据结束 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="updatedialogVisible = false; memberForm={}">取 消</el-button>
				<el-button type="primary" @click="updatecommit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入密码"))
			} else {
				if (this.memberForm.checkPassword !== "") {
					this.$refs.memberForm.validateField("checkPassword")
				}
				callback()
			}
		}
		var validateCheckPass = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请再次输入密码"))
			} else if (value !== this.memberForm.password) {
				callback(new Error("两次输入的密码不一致"))
			} else {
				callback()
				this.dis = false
			}
		}
		var validatePass1 = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入密码"))
			} else {
				if (this.memberForm.checkPassword !== "") {
					this.$refs.memberForm.validateField("checkPassword1")
				}
				callback()
			}
		}
		var validateCheckPass1 = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请再次输入密码"))
			} else if (value !== this.memberForm.password1) {
				callback(new Error("两次输入的密码不一致"))
			} else {
				callback()
			}
		}
		return {
			// 表格数据
			tableData: [],
			// 查询表单
			searchForm: {},
			//表单数据
			memberForm: {
				password: "",
				checkPassword: "",
			},
			//查询获取到的角色权限
			roleList: [],
			//表单多选获取的角色权限
			roleAll: [],
			//编辑的时候获取对应id的权限
			getRole: {},
			//页号
			page: 1,
			//页大小
			size: 10,
			//总记录数
			total: 0,
			dialogVisible: false,
			updatedialogVisible: false,
			//表单验证
			rules: {
				password: [
					{
						required: true,
						validator: validatePass,
						trigger: "blur",
					},
				],

				checkPassword: [
					{
						required: true,
						validator: validateCheckPass,
						trigger: "blur",
					},
				],

				password1: [
					{
						required: true,
						validator: validatePass1,
						trigger: "blur",
					},
				],

				checkPassword1: [
					{
						required: true,
						validator: validateCheckPass1,
						trigger: "blur",
					},
				],

				login_name: [
					{
						required: true,
						message: "请输入用户名",
						trigger: "blur",
					},
				],

				role_id: [
					{
						required: true,
						message: "请选择权限",
						trigger: "change",
					},
				],
			},
			//接受其他页面传过来的参数
			code: "",
			//未达到要求禁止点击按钮
			//dis: true,
		}
	},
	methods: {
		async getMember() {
			const { data: res } = await this.$http.get(
				`system/member/memberAll?page=${this.page}&size=${this.size}`,
				{
					params: this.searchForm,
				}
			)
			if (res.code == 200) {
				console.log(res)
				this.$message.success("查询成功")
				this.tableData = res.data.rows
				this.total = res.data.total
			}
		},
		//修改状态
		async statusChange(status) {
			const { data: res } = await this.$http.post(
				`system/member/updateStatus?STATUS=${status.STATUS}&id=${status.id}`
			)
			console.log(res)
			if (res.code !== 200) {
				this.$message.error("修改状态失败")
			}
		},
		//编辑
		async edit(row) {
			const { data: res } = await this.$http.get(
				`system/member/selectbyid?id=${row.id}&role_id=${row.role_id}&arId=${row.arId}`
			)
			this.memberForm = res.data
			this.updatedialogVisible = true
		},
		async deleteMember(row) {
			const confirmResult = await this.$confirm(
				"此操作将永久删除权限不可逆,是否继续?",
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}
			).catch((err) => err)
			console.log(confirmResult)
			if (confirmResult !== "confirm") {
				return this.$message.info("已取消删除")
			}
			const { data: res } = await this.$http.post(
				`system/member/deleteRole?id=${row.arId}`
			)
			if (res.code == 200) {
				this.$message.success("删除成功")
				this.getMember()
			}
		},
		handleSizeChange(val) {
			this.size = val
			this.getMember()
		},
		handleCurrentChange(val) {
			this.page = val
			this.getMember()
		},
		//搜索
		search() {
			console.log(this.memberForm)
			this.getMember()
		},
		//添加
		add() {
			this.dialogVisible = true
		},
		//修改
		async updatecommit() {
			if (this.memberForm.password1 !== this.memberForm.checkPassword1) {
				alert("两次输入的密码有误")
				return
			} else {
				const { data: res } = await this.$http.post(
					`system/member/update`,
					this.memberForm
				)
				if (res.code == 200) {
					this.$message.success("修改成功")
					this.updatedialogVisible = false
					this.getMember()
					this.memberForm = {}
				}
			}
		},
		addmember(memberForm) {
			this.$refs[memberForm].validate(async (valid) => {
				if (valid) {
					for (let i = 0; i < this.tableData.length; i++) {
						if (
							this.memberForm.login_name ===
								this.tableData[i].login_name &&
							this.memberForm.role_id ===
								this.tableData[i].role_id
						) {
							return alert("该管理员已拥有该权限,请重新选择")
						}
					}
					const { data: res } = await this.$http.post(
						`system/member/insert`,
						this.memberForm
					)

					if (res.code == 200) {
						this.$message.success("新增成功")
						this.dialogVisible = false
						this.getMember()
						this.memberForm = {}
					}
				} else {
					alert("请输入必填项")
					return
				}
			})
		},

		async getroleList() {
			const { data: res } = await this.$http.get(`system/role/findAll`)
			if (res.code == 200) {
				this.roleList = res.data
			} else {
				this.$message.error("获取角色菜单失败")
			}
		},
		clickList(id) {
			console.log(id)
		},
		setUpdateClear() {
			this.memberForm = {}
		},
		setAddClear() {
			this.memberForm = {}
		},
	},
	created() {
		this.code = this.$route.query.code
		this.searchForm = { name: this.code }
		this.getMember()
		this.getroleList()
	},
}
</script>

<style>
</style>